<template>
  <h1> Vite + Vue3 + TS </h1>
  <h2>{{ msg }}</h2>
  <button @click="handleChange"> change </button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// ts 项目需要用 defineComponent 包起来
export default defineComponent({
  setup() {
    // 定义普通数据无需写 data 结构
    let msg = 'Nice~';

    // 定义函数无需写 methods 结构
    const handleChange = () => {
      console.log('click');
      msg = 'fuck!';
      console.log('msg', msg);
    };

    // 在模板中使用的数据和函数需要在 setUp 中返回
    return { msg, handleChange };
  },
});
</script>
